<template>
    <div>
        <div @click="$router.go(-1)" style="display: flex;align-items: center;cursor: pointer;">
            <i class="el-icon-arrow-left" style="font-size: 20px;color: #409eff;"></i>
             <div style="color: #409eff;">返回</div>
        </div>
        <div>
            <el-descriptions :column="4" border class="margin-top" title style="margin-top: 20px;">
                <el-descriptions-item>
                    <template slot="label"> 用户</template>
                    <UserInfo :user_id="datas.user_id" :userInfos="datas.user_info" v-if="datas.user_id"></UserInfo>
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label"> 直播间</template>
                    {{ datas.desc }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">房间ID</template>
                    {{ datas.room_id }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">点赞数</template>
                    {{ datas.like_amount }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">直播收费价格</template>
                    {{ datas.price }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">状态</template>
                    <template>
                        <el-tag v-if="datas.status == 1" type="success">已开播</el-tag>
                        <el-tag v-else-if="datas.status == 2">已下播</el-tag>
                        <el-tag v-else type="danger">违规封停</el-tag>
                    </template>
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">位置信息</template>
                    {{ datas.city }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">用户请求时的IP</template>
                    {{ datas.ip }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">手机型号</template>
                    {{ datas.model }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label"> 用户发布时的详细地址</template>
                    {{ datas.ip_address }}
                </el-descriptions-item>


                <el-descriptions-item>
                    <template slot="label">房间提示</template>
                    {{ datas.notice }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">经度</template>
                    {{ datas.longitude }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">纬度</template>
                    {{ datas.latitude }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">直播收益</template>
                    {{ datas.income }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">在线人数</template>
                    {{ datas.online_user }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">累计观看人数</template>
                    {{ datas.online_amount }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">是否连麦</template>
                    {{ datas.connected == 0 ? '否' : '是' }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">人气</template>
                    {{ datas.popular }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">直播开始时间</template>
                    {{ datas.created_at }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">修改时间</template>
                    {{ datas.updated_at }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">直播结束时间</template>
                    {{ datas.finished_at }}
                </el-descriptions-item>


            </el-descriptions>
        </div>
        <div class="liveView flexSB">
            <div class="flex-1">
                <div v-if="status == 1 && play_url">
                    <video height="600" id="player" playsinline preload="auto" webkit-playsinline width="800"></video>
                </div>
                <div class="close-stream" v-else>主播已关播</div>
            </div>
            <div class="flex-1 pd-20 chat-item" v-if="status == 1 && play_url" style="height: 600px;">
                <item :info="value" :key="key" style="margin-bottom: 10px;" v-for="(value, key) in messages"></item>
            </div>
        </div>

        <el-popconfirm @confirm="reasonShowFun(datas.room_id)" title="确定要封禁这个直播吗？">
            <el-button size="small" slot="reference" style="margin-top: 10px;" type="danger"  v-permission="['ADMIN', 'LIVE_BAN']">封禁直播</el-button>
        </el-popconfirm>

        <el-dialog :visible.sync="reasonShow" title="封禁原因" width="800px">
            <el-form :model="reasonForm">
                <el-form-item label="封禁原因">
                    <el-input placeholder="请输入封禁原因" style="width: 500px" v-model="reasonForm.close_reason"
                        type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeBoxdisableFun">取 消</el-button>
                <el-button @click="disableFun" :loading="submitComplete" type="primary">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import store from '@/store';
import item from '@/components/comment/item'
import comment from '@/components/comment/index'
import TCPlayer from 'tcplayer.js'
import 'tcplayer.js/dist/tcplayer.min.css'
export default {
    components: {
        comment,
        item,
    },
    computed: {
        message() {
            return store.state.live.message
        },
        close() {
            return store.state.live.close
        }
    },
    watch: {
        message(newVal, oldVal) {
            // 数据变化后，调用b组件内的函数
            this.messages.push(newVal)
        },

        close(newVal, oldVal) {
            // 数据变化后，调用b组件内的函数
            this.status = 2
            this.play_url = ''
           // this.getLiveInfo()
        },
    },
    data() {
        return {
            player: null,
            play_url: '',
            status: 2,
            query: {},
            messages: [],
            datas: {},
            submitComplete: false,
            reasonShow: false,
            reasonForm: {
                close_reason: "", //理由
                room_id:''
            },
            disableID: '',
        }
    },

    mounted() {
        this.player_visible = true
        this.getLiveUrl()
       

    },

    methods: {
        
        reasonShowFun(id) {
            this.reasonForm.room_id = id
            this.reasonShow = true
        },

        initReasonForm() {
            this.reasonForm = {
                close_reason: "", //理由
                room_id:''
            }
        },


        //禁用
        disableFun(id) {
            if (this.submitComplete) return
            this.submitComplete = true
            let that = this
            this.$request.put('/live/stop_live', that.reasonForm).then((res) => {
                this.$message.success('操作成功')
                this.submitComplete = false
                that.reasonShow = false
                that.initReasonForm()
                that.status = 2
                that.play_url = ''
                if (this.player) {
                    this.player.dispose()
                }

               //  store.commit('SET_MESSAGE','')
            }).catch((error) => {
                this.submitComplete = false
            });
        },

        closeBoxdisableFun() {
            this.reasonShow = false
            that.initReasonForm()
        },

        getLiveUrl() {
            this.query = this.$route.query
            let parameter = {
                user_id: this.query.id,
                room_id: this.query.room_id,
            }
            this.$request.get('/live/stream_url', parameter).then((res) => {
                this.status = 1
                this.play_url = res.url
                this.$nextTick(() => {
                    this.player = TCPlayer('player', {
                        sources: [
                            {
                                src: res.url,
                            },
                        ],
                        licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1320915382_1/v_cube.license',
                        playbackRates: [],
                        autoplay: true,
                    })
                    this.joinRoom()
                    this.getLiveInfo()
                })
            })
        },
        joinRoom() {
            this.$request.post('/live/join_room', { room_id: this.query.room_id }).then((res) => {
                this.messages = res.message
                //store.commit('SET_MESSAGE', res.message)

                console.log(res, 88888)
            })
        },
        leaveRoom() {
            this.$request.post('/live/join_room', { room_id: this.query.room_id })
        },
        getLiveInfo() {
            let that = this
            this.$request.get('/live/get_room/' + this.query.room_id).then((res) => {
                console.log('直播信息', res)

                that.datas = res
            })
        },
        stopLive() {
            let that = this
            this.$request.put('/live/stop_live', { room_id: this.query.room_id }).then((res) => {
                this.$message.success('直播已关闭')
                that.status = 2
                that.play_url = ''
                if (this.player) {
                    this.player.dispose()
                }
            })
        },
    },
    beforeDestroy() {
        this.leaveRoom()
        if (this.player) {
            this.player.dispose()
        }
        store.commit('SET_MESSAGE', null)

        this.$nextTick(() => {
            this.player = null
            this.status = 2
            this.play_url = ''
        })
    },
}
</script>
  
<style scoped>
.liveView {
    position: relative;
}

.selectWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    line-height: 30px;
    margin: 20px;
    vertical-align: baseline;
}

.inputWrapper {
    width: 500px;
    margin: 0 auto;
}

.buttonWrapper {
    text-align: center;
}

.flexSB {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.jswebrtc {
    width: 800px;
    height: 600px;
}

.close-stream {
    width: 800px;
    height: 600px;
    background: #333;
    color: #fff;
    text-align: center;
    line-height: 600px;
}

.chat-item {
    background: #eee;
    height: 700px;
    overflow-y: scroll;
    transition: all 0.8s;
}
</style>
  
  